<template>
  <div class="menu">
    <a-menu mode="horizontal" @click="menuItemClick">
      <template v-for="i in menu">
        <a-menu-item v-if="i.subItem1 === undefined" :key="i.key">
          {{ i.item }}
        </a-menu-item>
        <a-sub-menu v-else :key="i.key">
          <span slot="title">{{ i.item }}</span>
          <template v-for="i1 in i.subItem1">
            <a-menu-item v-if="i1.subItem2 === undefined" :key="i1.key">
              {{ i1.item }}
            </a-menu-item>
            <a-sub-menu v-else :key="i1.key">
              <span slot="title">{{ i1.item }}</span>
              <template v-for="i2 in i1.subItem2">
                <a-menu-item v-if="i2.subItem3 === undefined" :key="i2.key">
                  {{ i2.item }}
                </a-menu-item>
                <a-sub-menu v-else :key="i2.key">
                  <span style="margin-right: 10px" slot="title">{{
                    i2.item
                  }}</span>
                  <template v-for="i3 in i2.subItem3">
                    <a-menu-item v-if="i3.subItem4 === undefined" :key="i3.key">
                      {{ i3.item }}
                    </a-menu-item>
                    <a-sub-menu v-else :key="i3.key">
                      <span slot="title" style="margin-right: 10px">{{
                        i3.item
                      }}</span>
                      <template v-for="i4 in i3.subItem4">
                        <a-menu-item :key="i4.key">{{ i4.item }}</a-menu-item>
                      </template>
                    </a-sub-menu>
                  </template>
                </a-sub-menu>
              </template>
            </a-sub-menu>
          </template>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
export default {
  name: "HomeMenu",
  props: {
    menu: Array
  },
  methods: {
    menuItemClick(n) {
      console.log(n);
      this.$emit("menuItemClick", n);
    }
  }
};
</script>

<style scoped>
.menu {
  width: 100%;
  display: flex;
  box-shadow: 0 5px 5px #c1bbbb;
}
</style>
